<template>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">处理</div>
      </div>
      <div class="content_main">
        <el-form 
          ref="formRef" 
          :inline="true" 
          :model="formData.data" 
          :rules="formRules" 
          class="-mb-15px"
          label-width="auto"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="定性事故等级" prop="levelId">
                <el-select v-model="formData.data.levelId" filterable clearable placeholder="请选择事故等级">
                  <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理状态" prop="status">
                <el-select v-model="formData.data.status" filterable clearable placeholder="请选择处理状态">
                  <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事故过程" prop="processMsg">
                <el-input
                  v-model="formData.data.processMsg"
                  type="textarea"
                  maxlength="200"
                  :autosize="{ minRows: 6}"
                  placeholder="请输入事故过程"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事故原因" prop="reasonMsg">
                <el-input
                  v-model="formData.data.reasonMsg"
                  type="textarea"
                  maxlength="200"
                  :autosize="{ minRows: 6}"
                  placeholder="请输入事故原因"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理结果" prop="resultMsg">
                <el-input
                  v-model="formData.data.resultMsg"
                  type="textarea"
                  maxlength="200"
                  :autosize="{ minRows: 6}"
                  placeholder="请输入处理结果"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件">
                <div class="upload_box" style="width: 100%;">
                  <UploadFile
                    v-model="formData.data.attachment"
                    class="upload-demo"
                    :fileSize="20"
                    :fileType="['jpg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']"
                    :limit="10"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap class="flex-c">
    <el-button type="primary" class="!w-80px" :loading="loading" @click="submitForm">提交</el-button>
    <el-button type="warning" class="!w-80px" @click="closeForm">返回</el-button>
  </ContentWrap>
</template>
<script setup>
  import {ref,reactive} from "vue"
  import { UploadFile } from "@/components/UploadFile/index.ts"
  import { formRules, levelList, statusList } from './jsonAndRules'
  const loading = ref(false)
  const message = useMessage() // 消息弹窗
  const formRef = ref(null)
  const emit = defineEmits(['close'])
  const formData = reactive({
    data: {
      id: 1,
      levelId: '', // 事故等级
      status: null,
      attachment: [], // 附件
      processMsg: '', // 事故过程
      reasonMsg: '', // 事故原因
      resultMsg: '', // 处理结果
    }
  })
  const init = async (id) => {
    console.log(id, 'BID');
    
  }
  const closeForm = () => {
    // 关闭表单弹窗逻辑
    emit('close')
  }
  const submitForm = (type) => {
    const formEl = formRef.value
    console.log(formEl, 'formEl');
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {

        console.log(formData.data, valid, '走这里来了？？？');
      }else{
        for(let key in fields){
          message.error(fields[key][0].message)
        }
      }
    })
  }
  defineExpose({ init })
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    min-height: 80px;
    padding: 6px;
    margin-bottom: 24px;
    // border-right: 1px solid #eee;
    box-sizing: border-box;
    .content_head {
        margin-bottom: 24px;
        .line {
            width: 5px;
            height: 21px;
            background: #50B5FF;
        }
        .title {
            font-size: 18px;
            color: #333;
            margin-left: 12px;
            font-weight: 600;
        }
    }
    .content_main {
        width: 100%;
        padding: 0 32px;
        box-sizing: border-box;
    }
}
</style>
